<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form ref="queryForm" :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="单位编码">
          <el-input
            v-model="queryParams.unitCode"
            placeholder="请输入单位编码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input
            v-model="queryParams.unitName"
            placeholder="请输入单位名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 操作按钮区域 -->
    <div class="table-operations">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
      <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete()">批量删除</el-button>
    </div>
    
          <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="unitList"
      @selection-change="handleSelectionChange"
      border
      ref="table"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单位编码" align="center" prop="unit_code">
        <template slot-scope="scope">
          <span>{{ scope.row.unit_code || '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center" prop="unit_name">
        <template slot-scope="scope">
          <span>{{ scope.row.unit_name || '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否是主单位" align="center" prop="isPrimary_unit">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.isPrimary_unit === '1' || scope.row.isPrimary_unit === 1">是</el-tag>
          <el-tag type="info" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="与主单位换算比例" align="center" prop="conversionrate">
        <template slot-scope="scope">
          <span>{{ scope.row.conversionrate || '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center" prop="unit_status">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.unit_status === '1' || scope.row.unit_status === 1">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.remarks || scope.row.remark || '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    
    <!-- 添加或修改计量单位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="单位编码" prop="unitCode">
          <el-input v-model="form.unitCode" placeholder="请输入单位编码" />
        </el-form-item>
        <el-form-item label="单位名称" prop="unitName">
          <el-input v-model="form.unitName" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="是否是主单位" prop="isMain">
          <el-radio-group v-model="form.isMain" @change="handleMainUnitChange">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="'主单位' + (form.isMain === '0' ? ' *' : '')" prop="mainUnitName" v-if="form.isMain === '0'">
          <el-select v-model="form.mainUnitName" placeholder="请选择主单位" style="width:100%">
            <el-option
              v-for="item in mainUnitOptions"
              :key="item.unit_id"
              :label="item.unit_name"
              :value="item.unit_name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'换算比例' + (form.isMain === '0' ? ' *' : '')" prop="conversionRate" v-if="form.isMain === '0'">
          <el-input-number v-model="form.conversionRate" :min="0.0001" :precision="4" :step="0.1" placeholder="请输入与主单位换算比例" />
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUnit, delUnit, addUnit, updateUnit, delUnits } from '@/api/basic/unit'
import Pagination from '@/components/Pagination'

export default {
  name: "BasicUnits",
  components: {
    Pagination
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 计量单位表格数据
      unitList: [],
      // 主单位选项
      mainUnitOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        unitCode: undefined,
        unitName: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        unitCode: [
          { required: true, message: "单位编码不能为空", trigger: "blur" }
        ],
        unitName: [
          { required: true, message: "单位名称不能为空", trigger: "blur" }
        ],
        isMain: [
          { required: true, message: "请选择是否是主单位", trigger: "change" }
        ],
        mainUnitName: [
          { required: true, message: "请选择主单位", trigger: "change" }
        ],
        conversionRate: [
          { required: true, message: "请输入换算比例", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择是否启用", trigger: "change" }
        ]
      },
      // 是否正在加载主单位列表
      isLoadingMainUnits: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
         /** 查询计量单位列表 */
     getList() {
       this.loading = true;
       // 根据后端API的实际需求调整请求参数
       const queryParams = {
         pageNum: this.queryParams.pageNum,
         pageSize: this.queryParams.pageSize,
         // 添加其他必要的查询参数
         unit_code: this.queryParams.unitCode, // 修改字段名与后端匹配
         unit_name: this.queryParams.unitName  // 修改字段名与后端匹配
       };
       
       listUnit(queryParams).then(response => {
         console.log('API响应数据:', response);
         // 适配后端返回的数据结构
         if (response.code === 200) {
           // 直接使用返回的rows数据
           this.unitList = response.rows || [];
           console.log('处理后的表格数据:', this.unitList);
           
           // 检查数据结构
           if (this.unitList.length > 0) {
             console.log('第一条数据示例:', this.unitList[0]);
             
                         // 检查字段名称
            const firstItem = this.unitList[0];
            if (!firstItem.unit_code && firstItem.unitCode) {
              // 如果数据使用驼峰命名法而不是下划线，进行转换
              this.unitList = this.unitList.map(item => ({
                unit_id: item.unitId || item.unit_id || item.id,
                unit_code: item.unitCode || item.unit_code,
                unit_name: item.unitName || item.unit_name,
                isPrimary_unit: item.isMain || item.isPrimary_unit || item.isPrimaryUnit,
                conversionrate: item.conversionRate || item.conversionrate,
                unit_status: item.status || item.unit_status,
                remarks: item.remarks || item.remark
              }));
             }
           }
           
           this.total = response.total || this.unitList.length || 0;
         } else {
           this.$message.error(response.msg || '获取数据失败');
           this.unitList = [];
           this.total = 0;
         }
         this.loading = false;
       }).catch(error => {
         console.error('获取单位列表失败:', error);
         this.$message.error('获取单位列表失败: ' + (error.message || '未知错误'));
         this.unitList = [];
         this.total = 0;
         this.loading = false;
       });
     },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        unitCode: undefined,
        unitName: undefined,
        isMain: "0",
        mainUnitName: undefined,
        conversionRate: 1,
        status: "1",
        remark: ''  // 初始化为空字符串而不是undefined
      };
      this.resetForm("form");
      // 如果默认不是主单位，加载主单位列表
      if (this.form.isMain === "0") {
        this.loadMainUnits();
      }
    },
    
    // 处理主单位选择变更
    handleMainUnitChange(value) {
      if (value === "0") {
        // 如果选择"否"，加载主单位列表
        this.loadMainUnits();
      } else {
        // 如果选择"是"，清空主单位名称和换算比例
        this.form.mainUnitName = undefined;
        this.form.conversionRate = 1;
      }
    },
    
    // 加载主单位列表
    loadMainUnits() {
      // 如果已经在加载中，直接返回
      if (this.isLoadingMainUnits) {
        return Promise.resolve();
      }
      
      // 设置加载状态
      this.isLoadingMainUnits = true;
      
      // 使用局部加载状态，避免影响整体表格
      const loadingState = this.$loading({
        lock: true,
        text: '加载主单位列表...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 调用API获取所有主单位 - 使用post方法发送查询条件
      return listUnit({ 
        isPrimary_unit: 1,
        unit_status: 1  // 只获取启用的单位
      })
        .then(response => {
          console.log('获取主单位列表响应:', response);
          if (response.code === 200) {
            const data = response.rows || [];
            // 过滤出所有isPrimary_unit为1的单位
            this.mainUnitOptions = data.filter(item => 
              item.isPrimary_unit === 1 || 
              item.isPrimary_unit === '1'
            );
            
            if (this.mainUnitOptions.length === 0) {
              this.$message.warning('没有找到可用的主单位，请先创建主单位');
            }
            
            console.log('主单位选项:', this.mainUnitOptions);
            
            // 如果正在编辑的单位已有主单位名称，确保选中该主单位
            if (this.form.mainUnitName) {
              const exists = this.mainUnitOptions.some(item => item.unit_name === this.form.mainUnitName);
              if (!exists) {
                // 如果主单位不在列表中，可能已被禁用或删除，发出警告
                this.$message.warning('原主单位可能已被禁用或删除，请重新选择主单位');
                this.form.mainUnitName = undefined;
              }
            }
          } else {
            // 静默处理错误，不显示弹窗
            console.error(response.msg || '获取主单位列表失败');
            this.mainUnitOptions = [];
          }
        })
        .catch(error => {
          // 静默处理错误，不显示弹窗
          console.error('获取主单位列表失败:', error);
          this.mainUnitOptions = [];
        })
        .finally(() => {
          // 无论成功还是失败，都关闭加载状态
          loadingState.close();
          this.isLoadingMainUnits = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
         /** 重置按钮操作 */
     resetQuery() {
       // 注意：这里的"queryForm"应该与表单的ref属性一致
       // 如果搜索表单没有设置ref属性，这里需要修改
       try {
         if (this.$refs.queryForm) {
           this.$refs.queryForm.resetFields();
         }
       } catch (error) {
         console.warn("重置表单失败:", error);
       }
       
       this.queryParams = {
         pageNum: 1,
         pageSize: 10,
         unitCode: undefined,
         unitName: undefined,
         status: undefined
       };
       this.handleQuery();
     },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // 确保获取正确的ID，优先使用unit_id字段
      this.ids = selection.map(item => item.unit_id || item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加计量单位";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      // 直接使用传入的行数据进行编辑
      console.log('修改单位行数据:', row);
      
      try {
        // 直接使用行数据
        this.form = {
          id: row.unit_id || row.id,
          unitCode: row.unit_code || row.unitCode,
          unitName: row.unit_name || row.unitName,
          isMain: (row.isPrimary_unit || row.isMain || '0') + '',
          mainUnitName: row.main_unit || row.mainunit || '',
          conversionRate: row.conversionrate || row.conversionRate || 1,
          status: (row.unit_status || row.status || '1') + '',
          remark: row.remarks || row.remark || ''
        };
        
        // 先显示对话框，再加载主单位列表
        this.open = true;
        this.title = "修改计量单位";
        
        // 如果不是主单位，预先加载主单位列表
        if (this.form.isMain === '0') {
          // 防止重复调用
          this.loadMainUnits().catch(err => {
            console.warn('加载主单位列表时出现问题:', err);
            // 静默处理错误，不显示弹框
            });
        }
      } catch (error) {
        console.error('处理修改操作时出错:', error);
        // 避免弹出错误提示，静默处理
      }
    },
         /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           // 如果不是主单位但没有选择主单位
           if (this.form.isMain === '0' && !this.form.mainUnitName) {
             this.$message.warning('请选择主单位');
             return;
           }
           
           // 如果不是主单位但没有输入换算比例
           if (this.form.isMain === '0' && (this.form.conversionRate === undefined || this.form.conversionRate <= 0)) {
             this.$message.warning('请输入有效的换算比例');
             return;
           }
           
           // 构造符合后端API要求的数据结构
           const formData = {
             // 确保字段名称与后端一致
             unit_id: this.form.id,
             unit_code: this.form.unitCode,
             unit_name: this.form.unitName,
             isPrimary_unit: this.form.isMain,
             unit_status: this.form.status,
             remarks: this.form.remark || '',  // 后端使用remarks字段，确保有值
             is_delete: "0"  // 添加is_delete字段
           };
           
           // 根据是否为主单位设置相关字段
           if (this.form.isMain === '1') {
             // 如果是主单位，设置换算比例为1，主单位为null
             formData.conversionrate = 1;
             formData.main_unit = null;
           } else {
             // 如果不是主单位，使用表单中的换算比例和主单位名称
             formData.conversionrate = this.form.conversionRate;
             formData.main_unit = this.form.mainUnitName;
           }
           
           console.log('提交的表单数据:', formData);
           
           if (this.form.id) {
             updateUnit(formData).then(response => {
               console.log('更新单位响应:', response);
               if (response.code === 200) {
                 this.$message.success("修改成功");
                 this.open = false;
                 this.getList();
               } else {
                 this.$message.error(response.msg || "修改失败");
               }
             }).catch(error => {
               console.error("修改单位失败:", error);
               this.$message.error("修改失败: " + (error.message || "未知错误"));
             });
           } else {
             addUnit(formData).then(response => {
               console.log('新增单位响应:', response);
               if (response.code === 200) {
                 this.$message.success("新增成功");
                 this.open = false;
                 this.getList();
               } else {
                 this.$message.error(response.msg || "新增失败");
               }
             }).catch(error => {
               console.error("新增单位失败:", error);
               this.$message.error("新增失败: " + (error.message || "未知错误"));
             });
           }
         }
       });
     },
         /** 删除按钮操作 */
     handleDelete(row) {
       // 从行数据或选中的ID数组获取ID
       let ids = [];
       let names = [];
       
       if (row) {
         // 单个删除
         const id = row.unit_id || row.id || row.unitId;
         if (id) {
           ids.push(id);
           names.push(row.unit_name || row.unitName || '未知单位');
         }
       } else {
         // 批量删除
         ids = this.ids;
         
         // 获取所有选中行的名称
         const selectedRows = this.$refs.table ? this.$refs.table.selection : [];
         if (selectedRows && selectedRows.length > 0) {
           names = selectedRows.map(row => row.unit_name || row.unitName || '未知单位');
         } else {
           names = ['选中的单位'];
         }
       }
       
       if (ids.length === 0) {
         this.$message.warning('请选择需要删除的计量单位');
         return;
       }
       
       // 根据是否为批量删除显示不同的确认消息
       const title = ids.length === 1 
         ? `是否确认删除计量单位"${names[0]}"?` 
         : `是否确认删除选中的${ids.length}个计量单位?`;
         
       this.$confirm(title, '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         // 根据ID数量决定使用单个删除还是批量删除API
         let deletePromise;
         if (ids.length === 1) {
           deletePromise = delUnit(ids[0]);
         } else {
           // 将ID数组转换为逗号分隔的字符串
           const idsString = ids.join(',');
           deletePromise = delUnits(idsString);
         }
         
         return deletePromise;
       }).then(response => {
         console.log('删除单位响应:', response);
         if (response.code === 200) {
           this.$message.success("删除成功");
           this.getList();
         } else {
           this.$message.error(response.msg || "删除失败");
         }
       }).catch(error => {
         console.error("删除单位失败:", error);
         if (error !== 'cancel') {
           this.$message.error("删除失败: " + (error.message || "未知错误"));
         }
       });
     }
  }
};
</script>

<style scoped>
.app-container {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 84px);
}

.search-container {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.table-operations {
  margin-bottom: 15px;
}

.el-table {
  margin-top: 15px;
  background-color: #ffffff;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>